<template>
    <div class="container">
       <div class="content">
         <div class="title" style="font-size: 20px;font-weight: bold">找回密码</div>
         <div class="user_number" style="margin-top: 20px">
           <span>请输入学号/工号：</span>
           <i-input  placeholder="请输入请输入学号/工号" v-model="user_number" required></i-input>
         </div>
         <div class="problemList" style="margin-top: 20px">
           <span>请选择密保问题：</span>
           <i-select placeholder="请选择密保问题"  v-model="problme_id">
             <i-option  v-for="problem in problemList" :key="problem.problem_id" :value="problem.problem_id">{{problem.content}}</i-option>
           </i-select>
         </div>
         <div class="answer" style="margin-top: 20px">
           <span>请输入密保答案：</span>
           <i-input  placeholder="请输入密保答案" v-model="answer" required></i-input>
         </div>
         <div class="newPsd" style="margin-top: 20px">
         <span>请输入输入新密码：</span>
         <i-input  placeholder="请重新输入密码" type="password" v-model="password" required></i-input>
       </div>
         <div class="newPsd1" style="margin-top: 20px">
           <span>请确认密码：</span>
           <i-input  placeholder="请再次确认密码" type="password" v-model="password1" required></i-input>
         </div>
         <div style="margin-top: 20px;width: 100%;display: flex;justify-content: center">
           <i-button type="success" @click="getPsd">找回密码</i-button>
         </div>

       </div>
    </div>
</template>

<script>
  import api from '../../api/index'
    export default {
        name: "getPsd",
      data () {
        return {
          user_number:null,
          user_psd:null,
          user_psd1:null,
          problemList:[],
          answer: null,
          problme_id:null
        };
      },
      mounted(){
          //获取密保问题列表
        api.getProblemList().then(res=>{
          if(res.status==1){
            this.problemList = res.data;
          }
        })
      },
      methods:{
          getPsd(){
            if(!this.user_number){
              this.$Message.warning('请输入学号或者工号');
              return;
            }else if(!this.problme_id){
              this.$Message.warning('请选择密保问题');
              return;
            }else if(!this.answer){
              this.$Message.warning('请输入密保答案');
              return;
            }else if(!this.user_psd){
              this.$Message.warning('请输入密保');
              return;
            }else if(this.user_psd!==this.user_psd1){
              this.$Message.warning('2次密码不一致请重新确认');
            }else {
              let data = {
                password:this.user_psd,
                user_number:this.user_number,
                problme_id:this.problme_id,
                answer:this.answer
              };
              api.getPsd(data).then(res=>{
                if(res.status==1){
                  this.$Message.success('重置密码成功请下次使用该密码进行登录');
                }else {
                  this.$Message.error('重置密码失败，密保问题和答案不一致');
                }
              })
            }
          }
      }
    }
</script>

<style scoped>
.container{
  width: 100%;
  height: 1000%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
